<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>千千万能工具箱-随机点餐系统</title>
	</head>
	<!-- 引入样式文件 -->
	<link rel="stylesheet" href="../js/vant2.2/index.css">
	<style>
		  .custom-button {
		    width: 26px;
		    color: #fff;
		    font-size: 10px;
		    line-height: 18px;
		    text-align: center;
		    background-color: blue;
		    border-radius: 100px;
		  }
	</style>
	<body>
		<div id="app">
			<div style="margin-top: 60%;margin-left: 2%;">
				
				<div style="width: 80%; margin: auto;">
					<van-slider v-model="value" range  bar-height="15px">
					<!-- <template #left-button>
					    <div class="custom-button">{{ value[0] }}元</div>
					  </template>
					  <template #right-button>
					     <div class="custom-button">{{ value[1] }}元</div>
					   </template> -->
					</van-slider>
				</div>
				<br/>
				<div style="width: 80%; margin: auto;">
				预算:{{value[0]}}-{{value[1]}}元
				</div>
				<br/>
				<div style="width: 80%;margin: auto;">
					<van-button type="info" block @click="start">{{showText}}</van-button>
				</div>
				<br/>
				<div style="width: 80%;margin: auto;">
					<van-button type="default" block @click="copy">复制菜品名称</van-button>
				</div>
		
</div>
		
		</div>
		
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue2.6.11/vue.js"></script>
		<link rel="stylesheet" href="../js/element2.4.7/index.css" />
		<script src="../js/element2.4.7/index.js"></script>
			  <script src="../js/vant2.2/vant.min.js"></script>
			  <script>
				  	const baseUrl = "https://api.lqcpws.cn"
					
					const menuUrl="https://lqcpws.cn/tinyfile/menu.json"
				  
				  
				 const app = new Vue({
				 	el: '#app',
				 	data: {
				 
	
				 		name: "hello",
						value: [0,20],
						status:"start",
						time:0,
						index:0,
						menuList:[],
						showText:"开始随机点餐",
						money:0,
						count:0,
					
			
				 
				 
				 	},
				 	mounted() {
			
			        let _this=this
				 		$.ajax({
				 			type: 'get',
				 			url: baseUrl + "/pc/requestCountByDay",
				 			success: function(res) {
				 
				 
				 			}
				 		})
						$.ajax({
							type: 'get',
							url: menuUrl,
						
							complete:function(res){
								
								_this.menuList=JSON.parse(res.responseText)
								// console.log(_this.menuList)
							}
						})
							this.$message.success('欢迎使用随机点餐系统，欢迎提意见！')
	
				 	},
				 	methods: {
				 	randomInt(start,end){
				 		return Math.floor(Math.random() * (end - start + 1) + start);
				 	},
					start(){
						this.count++
						if(this.status=="start"){
							console.log("st")
							this.money=this.randomInt(this.value[0],this.value[1])
							this.status="running"
						
						this.time=	setInterval(function(that){
							let z=that.randomInt(0,that.menuList.length-1)
							that.index=z
							that.showText=that.menuList[z]
								
							},100,this)
							
							
						}else{
							console.log("ed")
							clearInterval(this.time)
							this.status="start"
							this.showText="预算金额:"+this.money+"元，菜品:"+this.menuList[this.index]
							
						}
						
					},
					 copyToClipboard(text) {
					  // 创建一个临时的 textarea 元素
					  var textarea = document.createElement("textarea");
					  // 设置其内容为需要复制的文本
					  textarea.value = text;
					  // 将其添加到 DOM 中
					  document.body.appendChild(textarea);
					  // 选中文本
					  textarea.select();
					  // 复制文本到剪贴板
					  document.execCommand("copy");
					  // 移除元素
					  document.body.removeChild(textarea);
					},
					copy(){
						if(this.count>0){
						this.copyToClipboard(this.menuList[this.index])
						this.$message.success('复制成功！')
						}
					}
				 
				 	
				 
				 
				 
				 	}
				 }) 
			  </script>
	</body>
</html>